<template>
  <div class="about-page">
    <NavBar />
    
    <!-- 页面标题 -->
    <section class="page-header relative overflow-hidden py-24 bg-gradient-to-r from-blue-600 via-blue-500 to-indigo-700 text-white">
      <!-- 装饰元素 -->
      <div class="absolute top-0 left-0 w-full h-full overflow-hidden">
        <div class="absolute -top-20 -left-20 w-80 h-80 rounded-full bg-white/10 blur-3xl animate-pulse-slow"></div>
        <div class="absolute bottom-20 right-20 w-96 h-96 rounded-full bg-white/10 blur-3xl animate-pulse-slow-delay"></div>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full bg-indigo-500/30 blur-2xl"></div>
        <!-- 网格装饰 -->
        <div class="absolute inset-0 bg-grid-white-blue/[0.95] [mask-image:radial-gradient(ellipse_at_center,white,transparent_75%)]"></div>
      </div>
      <div class="container mx-auto px-4 text-center relative z-10">
        <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold mb-6 tracking-tight animate-fade-in-up">
          {{ $t('nav.about') }}
        </h1>
        <p class="text-[clamp(1rem,2vw,1.5rem)] max-w-3xl mx-auto opacity-90 animate-fade-in-up delay-100">
          了解深圳市晶鸿泰科技有限公司的发展历程与企业文化
        </p>
        <!-- 滚动指示 -->
        <div class="mt-12 animate-bounce">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 mx-auto opacity-80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
          </svg>
        </div>
      </div>
    </section>

    <!-- 公司简介 -->
    <section class="company-intro py-20 bg-gradient-to-br from-blue-50/40 via-white to-indigo-50/40" ref="introRef">
      <div class="container mx-auto px-4">
        <div class="flex flex-col items-center mb-12 opacity-0 transform translate-y-8 transition-all duration-700" ref="introTitleRef">
          <div class="w-24 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6 rounded-full"></div>
          <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-700">公司简介</h2>
          <p class="text-gray-600 max-w-2xl text-center">专注于工业胶水领域的技术创新与解决方案</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-12 items-center">
          <div class="company-image bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl h-96 flex items-center justify-center relative overflow-hidden shadow-lg group opacity-0 transform translate-x-[-20px] transition-all duration-700" ref="imageRef">
            <!-- 装饰光点 -->
            <div class="absolute top-1/4 left-1/4 w-20 h-20 rounded-full bg-blue-400/10 blur-xl"></div>
            <div class="absolute bottom-1/3 right-1/3 w-24 h-24 rounded-full bg-indigo-400/10 blur-xl"></div>
            
            <div class="absolute inset-0 bg-gradient-to-tr from-blue-600/10 to-indigo-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
            <img 
              src="@/assets/img/公司图片.png" 
              alt="深圳市晶鸿泰科技有限公司" 
              class="w-full h-full object-cover rounded-xl group-hover:scale-105 transition-transform duration-700"
            />
          </div>
          <div class="company-text opacity-0 transform translate-x-[20px] transition-all duration-700" ref="textRef">
            <p class="text-gray-700 mb-6 leading-relaxed text-lg">
              深圳市晶鸿泰科技有限公司，2022年成立，专注于高品质胶黏剂的生产与销售。我们提供硅胶、快干胶、塑料及金属粘结胶、UV胶等多元化产品，广泛应用于电子、汽车、医疗等领域。
            </p>
            <p class="text-gray-700 mb-6 leading-relaxed text-lg">
              公司拥有一支强大的研发团队，不断创新以满足客户需求。同时，我们注重质量管理体系和售后服务，确保产品稳定可靠。
            </p>
            <p class="text-gray-700 leading-relaxed text-lg">
              秉承"诚信、创新、共赢"的理念，晶鸿泰科技致力于成为胶黏剂行业的领导者，为客户提供卓越的产品和服务。
            </p>
            <div class="mt-8 flex flex-wrap gap-6">
              <div class="flex items-center transform transition-all duration-500 hover:scale-105 hover:text-blue-600 group">
              <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mr-4 shadow-sm group-hover:bg-gradient-to-r group-hover:from-blue-500 group-hover:to-indigo-600 transition-all duration-500">
                <span class="text-blue-600 font-bold text-2xl group-hover:text-white transition-colors duration-300">3+</span>
              </div>
              <span class="text-gray-600 font-medium transition-colors duration-300 group-hover:text-blue-600">年发展历程</span>
            </div>
            <div class="flex items-center transform transition-all duration-500 hover:scale-105 hover:text-blue-600 group">
              <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mr-4 shadow-sm group-hover:bg-gradient-to-r group-hover:from-blue-500 group-hover:to-indigo-600 transition-all duration-500">
                <span class="text-blue-600 font-bold text-2xl group-hover:text-white transition-colors duration-300">50+</span>
              </div>
              <span class="text-gray-600 font-medium transition-colors duration-300 group-hover:text-blue-600">专业团队</span>
            </div>
            <div class="flex items-center transform transition-all duration-500 hover:scale-105 hover:text-blue-600 group">
              <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mr-4 shadow-sm group-hover:bg-gradient-to-r group-hover:from-blue-500 group-hover:to-indigo-600 transition-all duration-500">
                <span class="text-blue-600 font-bold text-2xl group-hover:text-white transition-colors duration-300">100+</span>
              </div>
              <span class="text-gray-600 font-medium transition-colors duration-300 group-hover:text-blue-600">成功案例</span>
            </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 发展历程 -->
    <section class="company-history py-24 bg-gradient-to-b from-white via-blue-50/30 to-indigo-50/30 relative overflow-hidden" ref="historyRef">
      <!-- 装饰元素 -->
      <div class="absolute -top-40 -right-40 w-80 h-80 rounded-full bg-blue-100 blur-3xl"></div>
      <div class="absolute -bottom-40 -left-40 w-80 h-80 rounded-full bg-indigo-100 blur-3xl"></div>
      
      <div class="container mx-auto px-4 relative z-10">
        <div class="flex flex-col items-center mb-20 opacity-0 transform translate-y-8 transition-all duration-700" ref="historyTitleRef">
          <div class="w-24 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6 rounded-full"></div>
          <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-700">发展历程</h2>
          <p class="text-gray-600 max-w-2xl text-center">见证晶鸿泰科技的成长与发展</p>
        </div>
        
        <div class="relative max-w-4xl mx-auto">
          <!-- 时间线 -->
          <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-blue-200 via-blue-300 to-indigo-200 rounded-full"></div>
          
          <!-- 事件 -->
          <div v-for="(event, index) in historyEvents" :key="index" class="relative mb-16 opacity-0 transform" :class="index % 2 === 0 ? 'translate-x-[-20px]' : 'translate-x-[20px]'" :ref="el => historyEventRefs[index] = el as HTMLElement">
            <div 
              :class="['flex flex-col md:flex-row items-center', index % 2 === 0 ? 'md:flex-row-reverse' : '']"
            >
              <!-- 日期 -->
              <div class="md:w-1/2 mb-6 md:mb-0">
                <div 
                  :class="['text-right md:pr-12 pl-12 md:text-left', index % 2 === 0 ? 'md:text-right md:pl-12 md:pr-0' : '']"
                >
                  <h3 class="text-2xl font-bold text-blue-600 mb-3 inline-block relative pb-2 group cursor-pointer">{{ event.year }}
                    <span class="absolute left-0 bottom-0 w-full h-1 bg-blue-200 group-hover:bg-blue-600 transition-colors duration-500"></span>
                  </h3>
                  <div class="bg-white p-6 rounded-xl shadow-md inline-block max-w-xs transform transition-all duration-700 hover:scale-105 hover:shadow-xl border border-transparent hover:border-blue-100">
                    <p class="text-gray-700 leading-relaxed group-hover:text-blue-700 transition-colors duration-300">{{ event.description }}</p>
                  </div>
                </div>
              </div>
              
              <!-- 时间点 -->
              <div class="absolute left-1/2 transform -translate-x-1/2 w-10 h-10 rounded-full bg-gradient-to-r from-blue-600 to-indigo-600 border-4 border-white z-10 shadow-lg flex items-center justify-center transition-all duration-500 hover:scale-110 cursor-pointer">
                <div class="w-3 h-3 rounded-full bg-white animate-ping opacity-75 absolute"></div>
                <div class="w-3 h-3 rounded-full bg-white z-10"></div>
              </div>
              
              <!-- 空白占位 -->
              <div class="md:w-1/2"></div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 企业文化 -->
    <section class="company-culture py-24 bg-gradient-to-br from-white via-blue-50/20 to-white" ref="cultureRef">
      <div class="container mx-auto px-4">
        <div class="flex flex-col items-center mb-20 opacity-0 transform translate-y-8 transition-all duration-700" ref="cultureTitleRef">
          <div class="w-24 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6 rounded-full"></div>
          <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-700">企业文化</h2>
          <p class="text-gray-600 max-w-2xl text-center">我们的核心价值观</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 lg:gap-8">
          <div v-for="(value, index) in coreValues" :key="value.id" class="culture-item text-center p-8 bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-700 border border-transparent hover:border-blue-100 group opacity-0 transform translate-y-10 relative overflow-hidden" :ref="el => cultureItemRefs[index] = el as HTMLElement">
            <!-- 装饰元素 -->
            <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-50 opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
            <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-600"></div>
            
            <div class="culture-icon bg-blue-50 text-blue-600 w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-6 transform transition-all duration-500 group-hover:scale-110 group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-indigo-600 group-hover:text-white">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 transition-transform duration-500 group-hover:scale-110" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path :d="value.iconPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
              </svg>
            </div>
            <h3 class="text-xl font-bold mb-4 text-gray-800 transition-colors duration-300">{{ value.title }}</h3>
            <p class="text-gray-600 leading-relaxed transition-all duration-300">{{ value.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 企业荣誉 -->
    <section class="company-honors py-24 bg-gradient-to-b from-blue-50/30 via-white to-indigo-50/30 relative overflow-hidden" ref="honorsRef">
      <!-- 装饰元素 -->
      <div class="absolute top-20 right-20 w-60 h-60 rounded-full bg-blue-100 blur-3xl"></div>
      <div class="absolute bottom-20 left-20 w-60 h-60 rounded-full bg-indigo-100 blur-3xl"></div>
      
      <div class="container mx-auto px-4 relative z-10">
        <div class="flex flex-col items-center mb-20 opacity-0 transform translate-y-8 transition-all duration-700" ref="honorsTitleRef">
          <div class="w-24 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6 rounded-full"></div>
          <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-700">企业荣誉</h2>
          <p class="text-gray-600 max-w-2xl text-center">我们获得的行业认可</p>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 md:gap-4 lg:gap-6">
          <div v-for="(honor, index) in honors" :key="index" class="honor-item bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition-all duration-700 border border-transparent hover:border-blue-100 transform hover:-translate-y-2 hover:scale-105 opacity-0 translate-y-10 relative overflow-hidden group" :ref="el => honorItemRefs[index] = el as HTMLElement">
            <!-- 装饰元素 -->
            <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-50 opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
            <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-600"></div>
            
            <div class="w-16 h-16 rounded-full bg-gradient-to-br from-blue-100 to-indigo-100 flex items-center justify-center mx-auto mb-4 transition-all duration-500 group-hover:from-blue-500 group-hover:to-indigo-500 group-hover:text-white">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600 transition-colors duration-300 group-hover:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
              </svg>
            </div>
            <span class="text-lg font-bold text-blue-600 block mb-2 text-center transition-all duration-300 inline-block transform">{{ honor.year }}</span>
            <h3 class="font-bold text-center text-gray-800 transition-colors duration-300">{{ honor.title }}</h3>
          </div>
        </div>
      </div>
    </section>

    <Footer />
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch } from 'vue'
import NavBar from '@/components/NavBar.vue'
import Footer from '@/components/Footer.vue'

// 滚动监听相关引用
const introRef = ref<HTMLElement>()
const introTitleRef = ref<HTMLElement>()
const imageRef = ref<HTMLElement>()
const textRef = ref<HTMLElement>()
const historyRef = ref<HTMLElement>()
const historyTitleRef = ref<HTMLElement>()
const historyEventRefs = ref<HTMLElement[]>([])
const cultureRef = ref<HTMLElement>()
const cultureTitleRef = ref<HTMLElement>()
const cultureItemRefs = ref<HTMLElement[]>([])
const honorsRef = ref<HTMLElement>()
const honorsTitleRef = ref<HTMLElement>()
const honorItemRefs = ref<HTMLElement[]>([])

// 检测元素是否在视口中
const isInViewport = (element: HTMLElement) => {
  const rect = element.getBoundingClientRect()
  return (
    rect.top <= window.innerHeight * 0.8 &&
    rect.bottom >= 0
  )
}

// 监听滚动，触发动画
  const animateOnScroll = () => {
    // 公司简介部分动画
    if (introTitleRef.value && isInViewport(introTitleRef.value)) {
      introTitleRef.value.style.opacity = '1'
      introTitleRef.value.style.transform = 'translateY(0)'
      introTitleRef.value.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
    }
    
    if (imageRef.value && isInViewport(imageRef.value)) {
      setTimeout(() => {
        imageRef.value!.style.opacity = '1'
        imageRef.value!.style.transform = 'translateX(0)'
        imageRef.value!.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
      }, 100)
    }
    
    if (textRef.value && isInViewport(textRef.value)) {
      setTimeout(() => {
        textRef.value!.style.opacity = '1'
        textRef.value!.style.transform = 'translateX(0)'
        textRef.value!.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
      }, 200)
    }
  
  // 发展历程部分动画
    if (historyTitleRef.value && isInViewport(historyTitleRef.value)) {
      historyTitleRef.value.style.opacity = '1'
      historyTitleRef.value.style.transform = 'translateY(0)'
      historyTitleRef.value.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
    }
    
    historyEventRefs.value.forEach((event, index) => {
      if (event && isInViewport(event)) {
        setTimeout(() => {
          event.style.opacity = '1'
          event.style.transform = 'translateX(0)'
          event.style.transition = `opacity 0.7s ease, transform 0.7s ease`
        }, 100 + index * 150)
      }
    })
  
  // 企业文化部分动画
    if (cultureTitleRef.value && isInViewport(cultureTitleRef.value)) {
      cultureTitleRef.value.style.opacity = '1'
      cultureTitleRef.value.style.transform = 'translateY(0)'
      cultureTitleRef.value.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
    }
    
    cultureItemRefs.value.forEach((item, index) => {
      if (item && isInViewport(item)) {
        setTimeout(() => {
          item.style.opacity = '1'
          item.style.transform = 'translateY(0)'
          item.style.transition = `opacity 0.7s ease, transform 0.7s ease`
        }, 100 + index * 100)
      }
    })
    
    // 企业荣誉部分动画
    if (honorsTitleRef.value && isInViewport(honorsTitleRef.value)) {
      honorsTitleRef.value.style.opacity = '1'
      honorsTitleRef.value.style.transform = 'translateY(0)'
      honorsTitleRef.value.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
    }
    
    honorItemRefs.value.forEach((item, index) => {
      if (item && isInViewport(item)) {
        setTimeout(() => {
          item.style.opacity = '1'
          item.style.transform = 'translateY(0)'
          item.style.transition = `opacity 0.7s ease, transform 0.7s ease`
        }, 100 + index * 50)
      }
    })
  }

// 发展历程数据
const historyEvents = [
  {
    year: '2022年',
    description: '深圳市晶鸿泰科技有限公司成立，专注于高品质胶黏剂的生产与销售'
  },
  {
    year: '2023年',
    description: '建立现代化生产基地，完善质量管理体系'
  },
  {
    year: '2024年',
    description: '研发团队扩建，推出多元化产品系列，包括硅胶、快干胶、UV胶等'
  },
  {
    year: '2025年',
    description: '产品广泛应用于电子、汽车、医疗等领域，获得客户广泛认可'
  }
]

// 核心价值观
const coreValues = [
  {
    id: 1,
    title: '诚信为本',
    description: '诚实守信是我们的立业之本，坚持以客户为中心，提供优质产品和服务',
    iconPath: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'
  },
  {
    id: 2,
    title: '创新驱动',
    description: '持续创新是企业发展的动力，不断提升产品性能和技术水平',
    iconPath: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z'
  },
  {
    id: 3,
    title: '品质卓越',
    description: '以严格的质量管控体系，确保每一款产品都符合高标准要求',
    iconPath: 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z'
  },
  {
    id: 4,
    title: '合作共赢',
    description: '与客户、合作伙伴建立长期稳定的合作关系，实现互利共赢',
    iconPath: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z'
  }
]

// 企业荣誉
const honors = [
  { title: '高新技术企业', year: '2022' },
  { title: '质量信得过企业', year: '2023' },
  { title: '环保示范单位', year: '2024' },
  { title: '科技创新奖', year: '2024' }
]
onMounted(() => {
  // 初始化所有元素的过渡样式
  historyEventRefs.value.forEach(event => {
    if (event) {
      event.style.transition = 'opacity 0.6s ease, transform 0.6s ease'
    }
  })
  
  cultureItemRefs.value.forEach(item => {
    if (item) {
      item.style.transition = 'opacity 0.5s ease, transform 0.5s ease'
    }
  })
  
  honorItemRefs.value.forEach(item => {
    if (item) {
      item.style.transition = 'opacity 0.5s ease, transform 0.5s ease'
    }
  })
  
  // 初始触发一次
  setTimeout(animateOnScroll, 100)
  
  // 监听滚动事件
  window.addEventListener('scroll', animateOnScroll)
})

onUnmounted(() => {
  // 移除滚动事件监听
  window.removeEventListener('scroll', animateOnScroll)
})
</script>

<style scoped>
.about-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 动画类 */
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease forwards;
}

.animate-bounce {
  animation: bounce 2s infinite;
}

.animate-ping {
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.delay-100 {
  animation-delay: 0.1s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -8px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

@keyframes ping {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* 网格装饰 */
.bg-grid-white {
  background-image: linear-gradient(#ffffff 1px, transparent 1px),
                    linear-gradient(to right, #ffffff 1px, transparent 1px);
  background-size: 20px 20px;
}

/* 网格装饰带蓝色背景 */
.bg-grid-white-blue {
  background-color: rgba(59, 130, 246, 0.1); /* bg-blue-500/10 的实际颜色值 */
  background-image: linear-gradient(#ffffff 1px, transparent 1px),
                    linear-gradient(to right, #ffffff 1px, transparent 1px);
  background-size: 20px 20px;
}

/* 缓慢脉冲动画 */
.animate-pulse-slow {
  animation: pulse 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-pulse-slow-delay {
  animation: pulse 6s cubic-bezier(0.4, 0, 0.6, 1) 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* 保障主内容在hover时不消失，强制内容可见，不随group-hover变化 */
.culture-item h3,
.culture-item p {
  opacity: 1 !important;
  color: #1f2937 !important;
  position: relative;
  z-index: 2;
  visibility: visible !important;
}
.culture-icon,
.culture-icon svg {
  z-index: auto !important;
  opacity: 1 !important;
}
.honor-item h3,
.honor-item span {
  opacity: 1 !important;
  color: #1f2937 !important;
  position: relative;
  z-index: 2;
}
.honor-item .w-16,
.honor-item svg {
  z-index: auto !important;
  opacity: 1 !important;
}
/* 清除所有可能影响可见性的 group-hover 相关类 */
.culture-item [class*='group-hover'], .honor-item [class*='group-hover'] {
  opacity: 1 !important;
  color: #1f2937 !important;
}
</style>